<template>
    <div class="login-container">
        <el-card class="box-card">
            <div class="login-body">
                <div class="login-title" @click="toIndex">
                    <img src="../../assets/logo.png" style="width: 45px; position: relative; top: 13px; right: 6px">
                    <span style="color: #e75c09">骑手登录</span>
                </div>
                <el-form ref="form" :model="userForm">
                    <el-input
                        placeholder="请输入骑手用户名..."
                        v-model="userForm.riderName"
                        class="login-input"
                    >
                        <template slot="prepend">
                            <div class="el-icon-user"></div>
                        </template>
                    </el-input>
                    <el-input
                        placeholder="请输入骑手密码..."
                        v-model="userForm.password"
                        class="login-input"
                        @keyup.enter.native="login"
                        show-password
                    >
                        <template slot="prepend">
                            <div class="el-icon-lock"></div>
                        </template>
                    </el-input>
                    <div class="login-submit">
                        <el-button type="primary" @click="login" class="login-btn">登录</el-button>
                        <el-button type="warning" @click="$router.push('/register-rider')" class="login-btn">注册</el-button>
                    </div>
                    <div class="other-login-submit">
                        <el-button type="success" @click="$router.push('/login')" class="login-btn">用户登录</el-button>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "login-rider",
    data() {
        return {
            userForm: {
                riderName: '',
                password: ''
            }
        };
    },
    methods: {
        login() {
            // 构造登录数据
            const loginData = {
                riderName: this.userForm.riderName,
                password: this.userForm.password
            };

            this.$api.riderLogin(loginData)
                .then(res => {
                    console.log("骑手登录返回：", res);
                    if (res.code === 200) {
                        const token = res.token;
                        const riderInfo = res.data;

                        if (!token) {
                            this.$message.error('登录响应中缺少 token');
                            return;
                        }

                        // 清除可能存在的其他 token
                        localStorage.removeItem('token');
                        localStorage.removeItem('admin_token');
                        // 保存骑手 token
                        localStorage.setItem('rider_token', token);
                        this.$sta.isLogin = true;

                        // 保存骑手信息
                        this.$sta.riderName = riderInfo.riderName;
                        this.$sta.riderNickname = riderInfo.nickname;
                        this.$sta.riderPhone = riderInfo.phone;

                        // 跳转到骑手工作台
                        this.$router.replace({path: '/platform-rider'});
                        
                        // 显示成功消息
                        this.$message.success('登录成功');
                    } else {
                        this.$message.error(res.message || '登录失败，账号或密码错误！');
                    }
                })
                .catch(err => {
                    console.error("登录失败:", err);
                    this.$message.error("请求失败，请稍后重试");
                });
        },
        toIndex() {
            this.$router.replace({ path: '/index' });
        }
    }
};
</script>

<style scoped>
    .login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background: url("../../assets/login-back.png") center top / cover no-repeat;
    }
    .login-body {
        padding: 40px;
        width: 400px;
        height: 100%;
        opacity: 0.95;
        font-size: 30px; /* 整体字体稍微大一点 */
    }
    .login-title {
        padding-bottom: 30px;
        text-align: center;
        font-weight: 600;
        font-size: 26px;
        color: #409EFF;
        cursor: pointer;
    }
    .login-input {
        margin-bottom: 20px;
    }
    .login-submit {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }
    .login-btn {
        width: 200px;
        height: 40px;
    }
    .other-login-submit {
        margin-top: 15px;
        display: flex;
        justify-content: center;
        gap: 15px;
    }
    .sign-in-container {
        padding: 0 10px;
    }
    .sign-in-text {
        color: #409EFF;
        font-size: 16px;
        text-decoration: none;
        line-height:28px;
    }
    .other-submit{
        display:flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-left: 0px;
    }
</style> 